<template>
  <div class="auditwin" v-loading="isOutTime">
    <Table
      :name="{table,isbtn,pageNum,pageSize,pageLength}"
      @handleSelectionChange="handleSelectionChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @batchdelete="batchdelete"
      v-if="isShow"
    ></Table>
    <!-- 选中预约时间 -->
    <el-dialog title="选择预约时间" :visible.sync="selectTime" width="25%">
      <div class="block">
        <span class="demonstration">
          <p class="per-remind">
            <i class="el-icon-message-solid"></i>若当天预约名额已达上限，请选择其他时间段
          </p>
        </span>
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectTime = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预约成功 -->
    <el-dialog title="预约成功" :visible.sync="succeed" width="25%">
      <div class="succeed-layer">
        <div class="number">
          <p>23</p>
        </div>
        <span class="s-1">请您2020年7月20日，下午13:00—15:00到四川成都武侯区某某街道办理业务！</span>
        <span class="s-2">备注：请带好您办理业务时的身份证，营业执照等等</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="succeed = false">取 消</el-button>
        <el-button type="primary" @click="succeed = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from "@/components/tableStyle/Table";

export default {
  data() {
    return {
      // 数据
      table: [],
      //预约成功：待定
      //审核通过：2
      //审核失败：3
      //审核中：1
      isbtn: 1,
      user: {},
      index: "",
      //分页
      pageNum: 1,
      pageSize: 10,
      pageLength: 0,
      //选择时间
      selectTime: false,
      startTime: "2020-10-22",
      value: "1",
      //预约成功
      succeed: false,
      //判断是否超时
      isOutTime: true,
      //判断数据是否获取到
      isShow: false,
    };
  },
  components: { Table },
  methods: {
    //单选全选
    handleSelectionChange(value) {
      //console.log(value);
    },
    //审核中查看详情
    viewDetails(index, row) {
      //console.log(row);
      this.$router.push({
        name: "formTemplate",
        params: {
          id: row.id,
        },
      });
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.interface();
      ////console.log(this.pageSize)
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.interface();
      ////console.log(this.pageNum)
    },
    //删除
    batchdelete(val) {
      // ////console.log(val);
    },
    //设置时间
    setsTime() {
      //  this.succeed = true;
      // this.selectTime = false;
      // ////console.log(this.value);
      // this.succeed = true;
      // return
      this.$http
        .post("/trademark/proPublic/appointment", {
          branchNetworkId: this.user.branchNetworkId,
          pid: this.user.id,
          sign: this.value,
          start: this.startTime,
        })
        .then((result) => {
          // ////console.log(result);
        });
    },

    //接口
    interface() {
      this.$http
        .post("/trademark/proPublic/findUserStatus", {
          status: this.isbtn,
          // userId: Number(this.$store.state.userId),
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          ////console.log(res)
          if (res.data.code !== 200) {
            this.$message.error("获取数据失败");
            this.isOutTime = false;
          } else {
            this.pageLength = res.data.data.total;
            this.table = res.data.data.list;
            this.isShow = true;
            this.isOutTime = false;
            // ////console.log(this.isShow);
          }
        })
        .catch((err) => {
          this.$message.error("服务器崩溃！");
          this.isShow = true;
          this.isOutTime = false;
        });
    },
  },
  mounted() {
    // ////console.log(Number(this.$store.state.userId));
    this.interface();
    this.$store.commit("changeTopState", "/business/myBusiness")
    this.$store.commit("changeMyBusState","/business/myBusiness/auditing");
  },
};
</script>

<style lang="less" scoped>
.auditwin {
  .block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .demonstration {
      margin-bottom: 22px;
      color: #ff6633;
      .per-remind {
        display: flex;
        align-items: center;
        .el-icon-message-solid {
          font-size: 20px;
          padding-right: 20px;
        }
      }
    }
    .el-date-editor /deep/.el-range-separator {
      width: 7%;
    }
  }
  .succeed-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .number {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      line-height: 50px;
      text-align: center;
      background-color: #ff6633;
      font-size: 30px;
      color: #fff;
      margin: 0 auto 30px;
    }
    .s-2 {
      color: #ff6633;
    }
  }
}
</style>